<template>
  <div class="global-container">
    <Asteps :stepActive="stepActive" />
    <div class="steps-content">
      <Steps1 v-if="stepActive === 0" @nextDisabled="nextDisabled = $event" />
      <Steps2 v-if="stepActive === 1" />
      <Steps3
        v-if="stepActive === 2"
        ref="Steps3"
        :id="infoId"
        :createdId="createdId"
        :bussType="bussType"
      />
      <Steps4
        v-if="stepActive === 3"
        ref="Steps4"
        :id="infoId"
        :bussType="bussType"
      />
      <Steps5 v-if="stepActive === 4" :id="infoId" :bussType="bussType" />
      <Steps6 v-if="stepActive === 5" :bussType="bussType" />
    </div>
    <div class="footer">
      <template v-if="stepActive != 5">
        <el-button
          type="primary"
          class="btn"
          v-if="stepActive == 2"
          @click="save"
          >暂存</el-button
        >
        <el-button
          v-if="stepActive != 0 && stepActive != 1"
          type="primary"
          class="btn"
          @click="previous"
          >上一步
        </el-button>
        <el-button
          v-if="
            stepActive == 0 ||
            stepActive == 1 ||
            (stepActive == 2 && infoId) ||
            stepActive == 3
          "
          type="primary"
          class="btn"
          :disabled="nextDisabled"
          @click="next"
          >下一步
        </el-button>
        <el-button
          type="primary"
          class="btn"
          v-if="stepActive == 4"
          @click="submit"
          >确认提交</el-button
        >
      </template>
    </div>
  </div>
</template>
<script>
import Asteps from '@/components/Steps/Asteps.vue';
import Steps1 from './components/Steps1.vue';
import Steps2 from './components/Steps2.vue';
import Steps3 from './components/Steps3.vue';
import Steps4 from './components/Steps4.vue';
import Steps5 from './components/Steps5.vue';
import Steps6 from './components/Steps6.vue';
import businessApi from '@/api/business';
export default {
  props: {
    // 业务id
    id: {
      type: String,
    },
    // 业务类型
    bussType: {
      default: '5',
    },
  },
  components: {
    Asteps,
    Steps1,
    Steps2,
    Steps3,
    Steps4,
    Steps5,
    Steps6,
  },
  data() {
    return {
      // 当前步骤
      stepActive: 0,
      // 业务id
      infoId: null,
      // 业务id(初次生成)
      createdId: null,
      // 下一步按钮是否禁用
      nextDisabled: false,
    };
  },
  watch: {
    id: {
      // 带入业务id
      handler(val) {
        this.infoId = val;
      },
      immediate: true,
    },
  },
  mounted() {
    // 读取业务信息
    this.init();
    // 生成业务id
    if (this.$store.state.user.userInfo.userType == 2) {
      this.createdId =
        this.$dayjs().valueOf() + this.$store.state.user.userInfo.id;
    }
  },
  beforeRouteLeave(to, from, next) {
    next((vm) => {
      // 重新获取未读消息
      if (to.path !== '/login') {
        vm.$store.commit('count/getCount');
      }
    });
  },
  methods: {
    async init() {
      // 是否有未提交业务
      if (this.infoId) {
        this.stepActive = 2;
        this.nextDisabled = false;
      }
    },
    save() {
      // 暂存
      this.$refs.Steps3.save().then((res) => {
        if(res.infoId){
          this.infoId = res.infoId;
        }
      });
    },
    // 上一步
    previous() {
      this.stepActive = this.stepActive - 1;
    },
    // 下一步
    next(e) {
      // 强制失焦
      if (e) {
        let target = e.target;
        if (target.nodeName === 'SPAN' || target.nodeName === 'I') {
          target = target.parentNode;
        }
        target.blur();
      }
      if (this.stepActive == 2) {
        // 暂存
        this.$refs.Steps3.save().then((res) => {
          if (res.infoId) {
            this.infoId = res.infoId;
            this.stepActive = this.stepActive + 1;
          }
        });
        return;
      }
      if (this.stepActive == 3 && this.$refs.Steps4.validTable()) {
        return false;
      }
      this.stepActive = this.stepActive + 1;
    },
    async submit() {
      try {
        // 确认
        await this.$confirm('你确认要提交申请?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        });
        let params = {
          applyId: this.infoId,
        };
        //根据业务类型提交
        await businessApi[`saveUserBusiness${this.bussType}`](1, params);
        this.$message.success('提交成功!');
        this.next();
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.global-container {
  display: flex;
  flex-direction: column;

  .steps-content {
    flex: 1;
  }

  .footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;

    .btn {
      margin-left: 24px;
      width: 120px;
    }
  }
}
</style>
